'use client'
import React from 'react'

export default function PageTitle({ title, buttonText, onButtonClick, buttonDisabled = false, extraButtonText, onExtraButtonClick, extraButtonDisabled = false }) {
  return (
    <div className='sticky top-0 z-10'>
      <div className='pt-2 bg-[#F1F1F1] mb-2'>
        <div className='flex items-center justify-between border-none h-12 bg-white px-4 rounded-xs shadow-xs'>
          {title && <div className='text-sm font-semibold text-black h-12 flex items-center'>{title ? title : 'Page Name'}</div>}
          <div className='flex items-center space-x-2 h-12'>
            {extraButtonText && <button className='btn h-9 border-none rounded-xs bg-red-500 text-white' disabled={extraButtonDisabled} onClick={() => onExtraButtonClick && onExtraButtonClick()}>{extraButtonText ? extraButtonText : 'Button'}</button>}
            {buttonText && <button className='btn h-9 bg-[var(--theme-color)] text-white rounded-xs' disabled={buttonDisabled} onClick={() => onButtonClick && onButtonClick()}>{buttonText ? buttonText : 'Button'}</button>}
          </div>
        </div>
      </div>
    </div>
  )
}
